<template>
	<view class="all">
		<view class="vtd" v-for="(item,index) in video" :key="index">
			<video class="vid" autoplay="true" :src="srcUrl(item.path)" v-if="video.length >0"></video> 
		</view>
		<view v-if="list.length>0">
			<view class="td" v-for="(item,index) in list" :key="index">
				<view class="vlist">
					<view v-for="(photo,ix) in item.photos" :key="ix" class="allimg">
						<image class="imga" :src="srcUrl(photo.path)" style="width: 150rpx; height: 150rpx;"></image>
					</view>
					<view class="name">作品名称:{{item.photos[0].name}}</view>
					<view class="list">
						<view v-if="item.photos[0].create_by==null || item.photos[0].create_by==''">
							<view class="name">作者:暂无作者</view>
						</view>
						<view v-else>
							<view class="name">作者:{{item.photos[0].create_by}}</view>
						</view>
						<view class="name1">时间:{{happenTimeFun(item.photos[0].create_time)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="td1">暂无信息，敬请期待！！！</view>
	</view>
</template>

<script>
	export default{
		data()	{
			return	{
				photos:[],
				size:20,
				page:0,
				list:[],
				size1:1,
				video:[]
				
				
			}
		},
		onLoad(){
			uni.request({
					url:getApp().globalData.URL+"photos/findByPhotos?page="+this.page+"&size="+this.size,
					method:'GET'
				})
			.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
				var [error, res]  = data;
				console.log(res.data);
				
				this.photos = res.data;
				let list=[];
				let user_id=[];
				let create_time=[];
				//判断
				this.photos.map(item => {
				  if(user_id.indexOf(item.user_id) === -1 || create_time.indexOf(item.create_time) === -1){
					list.push({
					  user_id: item.user_id,
					  create_time: item.create_time,
					  photos: []
					});
					user_id.push(item.user_id);
					create_time.push(item.create_time);
				  }
				})
				
				list.map(item => {
				 this.photos.map(items => {
				    if(item.user_id == items.user_id && item.create_time == items.create_time){
				      item.photos.push(items)
				    }
				  })
				})
				
				this.list = list;
				
			})
			uni.request({
					url:getApp().globalData.URL+"photos/findByVideo?page="+this.page+"&size="+this.size1,
					method:'GET'
				})
			.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
				var [error, res]  = data;
				console.log("成功连接!!");
				console.log(res.data);
				this.video = res.data;
				
			})
		},
		onReachBottom:function(){				//当划到最底部的时候触发事件
				console.log("我是最底部了");
					this.getMoreNews();				//到底之后会触发getMoreNews()函数;
				},
		methods:{
			getMoreNews:function(){						//数据到底,触发这个函数
				this.page = this.page + 1
				uni.showNavigationBarLoading();		//一读取数据,就进行刷新
				uni.request({
					url:getApp().globalData.URL+"photos/findByPhotos?page="+this.page+"&size="+this.size,
					method:'GET'
				})
				.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
				var [error, res]  = data;
				
				if(res.data==0){
					this.page = this.page - 1
					uni.stopPullDownRefresh();	//数据加载完成,刷新结束
					uni.hideNavigationBarLoading();	//数据读取完毕,刷新停止
					return false;
				}
				// console.log(Array.from(data[1].data));
				this.photos=this.photos.concat(Array.from(data[1].data))
				let list=[];
				let user_id=[];
				let create_time=[];
				//判断
				this.photos.map(item => {
				  if(user_id.indexOf(item.user_id) === -1 || create_time.indexOf(item.create_time) === -1){
					list.push({
					  user_id: item.user_id,
					  create_time: item.create_time,
					  photos: []
					});
					user_id.push(item.user_id);
					create_time.push(item.create_time);
				  }
				})
				
				list.map(item => {
				 this.photos.map(items => {
				    if(item.user_id == items.user_id && item.create_time == items.create_time){
				      item.photos.push(items)
				    }
				  })
				})
				console.log(this.photos);
				
				this.list = list;
				uni.stopPullDownRefresh();	//数据加载完成,刷新结束
				uni.hideNavigationBarLoading();	//数据读取完毕,刷新停止
								
				});
			},
			srcUrl:function(path){
				return getApp().globalData.Link+'upload/图片/'+path;
			},
			
			happenTimeFun(num){//时间戳数据处理
					 let date = new Date(parseInt(num));
					 //时间戳为10位需*1000，时间戳为13位的话不需乘1000
					 let y = date.getFullYear();
					 let MM = date.getMonth() + 1;
					 MM = MM < 10 ? ('0' + MM) : MM;//月补0
					 let d = date.getDate();
					 d = d < 10 ? ('0' + d) : d;//天补0
					 let h = date.getHours();
					 h = h < 10 ? ('0' + h) : h;//小时补0
					 let m = date.getMinutes();
					 m = m < 10 ? ('0' + m) : m;//分钟补0
					 let s = date.getSeconds();
					 s = s < 10 ? ('0' + s) : s;//秒补0
					 return y + '/' + MM + '/' + d; //年月日
				 }
		}
	}
</script>

<style>
	.vlist{
		width: 97%;
	}
	
	.allimg{
		display: inline-flex;
		
	}
	
	.all {
		background-color: #F1F1F1;
	}

	.lunb {
		width: 95%;
		margin-left: 20rpx;


	}

	.list {
		display: flex;
	}

	.img {
		width: 100%;
		height: 300rpx;
		border-radius: 5%;
		margin-top: 10rpx;
	}

	.tit {
		text-align: center;
		width: 300rpx;
		margin-left: 220rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 50rpx;
		border-radius: 5%;
		margin-top: 20rpx;
		align-items: center;
	}
	
	.vtd {
		width: 95%;
		background-color: #FFFFFF;
		margin-left: 18rpx;
		border-radius: 5%;
		
	}

	.td {
		width: 95%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		margin-left: 18rpx;
		border-radius: 5%;
		padding-bottom: 15rpx;
		
	}
	.td1{
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		text-align: center;
	}

	.vid {
		margin-left: 18rpx;
		margin-top: 20rpx;
		height: 350rpx;
		width: 95%;
		border-radius: 3%;
		object-fit:fill;
		margin-bottom: 14rpx;
	}

	.name {
		font-size: 27rpx;
		color: #555555;
		margin-left: 20rpx;
	}

	.name1 {
		font-size: 27rpx;
		color: #555555;
		margin-left: auto;
	}

	.imga {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}
</style>
